const canvas = document.getElementById('envelopeCanvas');
const ctx = canvas.getContext('2d');

const contentWrapper = document.getElementById('contentWrapper');
const customContent = document.getElementById('customContent');

let envelopeOpen = false;
let animationFrame;

// 信封的初始和展开状态高度
const initialHeight = 100;
const expandedHeight = 200;
let currentHeight = initialHeight;

// 动画函数
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制信封
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.strokeStyle = '#f0f0f0';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(canvas.width - 20, 20);
    ctx.lineTo(canvas.width - 20, canvas.height - 20);
    ctx.lineTo(20, canvas.height - 20);
    ctx.closePath();
    ctx.stroke();

    ctx.fillStyle = '#f0f0f0';
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(canvas.width / 2, currentHeight);
    ctx.lineTo(canvas.width - 20, 20);
    ctx.closePath();
    ctx.fill();

    // 展开动画
    if (envelopeOpen && currentHeight < expandedHeight) {
        currentHeight += 5; // 调整展开速度
        animationFrame = requestAnimationFrame(animate);
    } else if (!envelopeOpen && currentHeight > initialHeight) {
        currentHeight -= 5; // 调整关闭速度
        animationFrame = requestAnimationFrame(animate);
    } else {
        cancelAnimationFrame(animationFrame);
    }

    // 绘制内容
    ctx.fillStyle = '#000';
    ctx.font = '16px Arial';
    ctx.fillText(customContent.innerText, 30, currentHeight + 30);
}

// 点击信封时的事件处理
canvas.addEventListener('click', () => {
    if (!envelopeOpen) {
        envelopeOpen = true;
        animationFrame = requestAnimationFrame(animate);
    } else {
        envelopeOpen = false;
        animationFrame = requestAnimationFrame(animate);
    }
});

// 初始化画布
animate();